<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <!-- <link rel="stylesheet" type="text/css" href="../css/api.css"/> -->
      <style>
      *{
        margin:0;
        padding:0;
      }
      body {
          padding-top: 1.5rem;
          border:0;
         background: transparent;

      }
      .all{
        width: 100%;
        height: 100%;
        position: fixed;
      }
      .all_img{
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color:rgba(255,255,255,0.1);
      }

      .fl{
        float: left;
      }
      .fr{
        float: right;
      }
      .header{
        width: 93%;
        height:2.5rem;
        padding:0.5rem 0.8rem;
        z-index: 999;
        position: absolute;
        top:1.5rem;
        /*border: 0.1rem solid red;*/

      }

      .left_img{
        width: 2.2rem;
        height: 2.2rem;
      border-radius:50%;

       overflow:hidden;
      }
      .left_img img{
        width: 100%;
        height: 100%;
      }
      .left_p{
        color: #fff;
        width: auto;
        font-size: 0.8rem;
        /*margin-top: 0.3rem;*/
        margin-left: 0.2rem;
      }
      .left_gz{
        width: auto;
        height: 1.7rem;
        color: #fff;
        background-color: #40cccc;
        line-height: 1.7rem;
        padding: 0rem 0.6rem;
        border-radius: 1rem;
        font-size: 0.9rem;
        margin-top: 0.3rem;
          margin-left: 0.2rem;
          display: none;
      }
      .header_right{

       width: auto;
       margin-right: 2.2rem;
       display: flex;
       flex-wrap: nowrap;
       height: 2.5rem;
       margin-top: 0.2rem;
       overflow-x: auto;
       overflow-y: hidden;
     }
     .right_img{
       width: 2.2rem;
       height: 2.2rem;
     border-radius:50%;
       white-space: nowrap;
        margin-left: 0.2rem;
     }

     .heaght_c{
       width: auto;
       height: auto;
       background-color: #fff;
       border-radius: 50%;
       padding: 0rem;
       position: fixed;
       top:2.2rem;
       right: 0.8rem;
     }
      .c_img{
        width: 2rem;
        height: 2rem;
      }
      .c_img img{
        width: 100%;
        height: 100%;
      }
      .time{
        position: relative;
        right:0.8rem;
        top:3.5rem;
        width: auto;
      }
      .time p{
        background-color: rgba(0,0,0,0.4);
        color: #fff;
        font-size: 0.7rem;
        border-radius: 1rem;
        margin-top: 0.3rem;
        padding: 0.2rem 0.1rem;
      }
      .nav{
        position: absolute;
        left:0.8rem;
        top:5.2rem;
        display: none;
      }
      .one{
        width: auto;
        height: auto;
        /*margin-top: 0.5rem;*/
      }
      .nav_one{
        width: 100%;
        height: 7.5rem;
      }
      .nav_one img{
        width: 100%;
        height: 100%;
      }
      .one_cuo{
        width: 1.2rem;
        height: 1.2rem;
        position: relative;
        bottom:7.5rem;
        left:75%;
        z-index: 999;
      }
      .one_cuo img{
        width: 100%;
        height: 100%;
      }
      .nav_p{
        width: 100%;
        height: 1.5rem;
        color: #fff;
        background-color: rgba(0,0,0,0.4);
        line-height: 1.5rem;
        font-size: 0.9rem;
        text-align: center;
        position: relative;
        bottom: 2.7rem;
      }
      .cont_txt{
        width: 80%;
        max-height: 20rem;
        min-height: 0rem;
        overflow: auto;
        z-index: 999;
        position: absolute;
        bottom:3.5rem;
        left:0.8rem;
      }
      .text{
        width: auto;
        height: auto;


      }
      .text_p{
        width:auto;
        white-space:wrap;
        margin-right: 1rem;
        padding: 0.4rem;
        border-radius: 0.7rem;
        color: #fff;
        background-color: rgba(0,0,0,0.15);
        margin-top: 0.5rem;
        font-size: 0.9rem;
 clear: both;
      }
      .span{
        color: #40cccc;
        display: inline;
      }
      .span1{
        color: yellow;
        display: inline;
      }
      .span_img{
        width: 1rem;
        height: 1rem;
      }
      .span_img img{
        width: 100%;
        height: 100%;
      }
      .footer{
        width: 93%;
        position: absolute;
        bottom:0.5rem;
        left:0.8rem;
        z-index: 999;
      }
      .input{
        width: 75%;
        height: 2rem;
        background:none;
        background-color:rgba(243,243,243,0.5);

         outline:none;
         border:1px solid #ccc;
         border-radius: 1rem;
        padding: 0.3rem;
      }
      .footer_r{
        width: 20%;
        height: 2.5rem;
        border-radius: 0.5rem;
        background-color: #40cccc;
        color: #fff;
        text-align: center;
        margin-top: 0.1rem;
        line-height: 2.5rem;
      }
      .header_left{
        background-color: rgba(0,0,0,0.5);
        padding: 0.2rem 0.5rem 0.2rem 0.2rem;
        border-radius: 2rem;
      }
      </style>
  </head>
  <body>

    <div class="all">
      <div class="all_img">

      </div>

    </div>
    <div class="header">
        <div class="header_left fl">
            <div class="left_img fl">
              <img src="../image/45.png" alt="" id="shop_head">
            </div>
            <div class="left_p fl">
              <p>老师</p>
              <p id="usernum"></p>
            </div>
            <div class="left_gz fl">
              关注
            </div>
        </div>
        <div class="header_right" id="uheads">
          <!-- <img src="../image/45.png" alt="" width="100%" height="100%"class="right_img fr">
            <img src="../image/45.png" alt="" width="100%" height="100%"class="right_img fr">
              <img src="../image/45.png" alt="" width="100%" height="100%"class="right_img fr">
                <img src="../image/45.png" alt="" width="100%" height="100%"class="right_img fr">

                  <img src="../image/45.png" alt="" width="100%" height="100%"class="right_img fr">
                    <img src="../image/45.png" alt="" width="100%" height="100%"class="right_img fr">
                      <img src="../image/45.png" alt="" width="100%" height="100%"class="right_img fr">
                        <img src="../image/45.png" alt="" width="100%" height="100%"class="right_img fr">
                          <img src="../image/45.png" alt="" width="100%" height="100%"class="right_img fr">
                          <img src="../image/45.png" alt="" width="100%" height="100%"class="right_img fr">
                            <img src="../image/45.png" alt="" width="100%" height="100%"class="right_img fr">
                              <img src="../image/45.png" alt="" width="100%" height="100%"class="right_img fr"> -->

        </div>
        <div class="heaght_c fr" onclick="of()">
          <div class="c_img">
            <img src="../image/cuo.png" alt="">
          </div>
        </div>
    </div>
    <div class="nav fl">
      <div class="one">
        <div class="nav_one">
          <img src="../image/u64.png" alt="">
        </div>
        <div class="one_cuo">
          <img src="../image/cuo_1.png" alt="">
        </div>
        <p class="nav_p">叶男</p>
      </div>
    </div>
    <div class="time fr">
      <!-- <p>时长：60分钟</p>
      <p>计时：10:21:19</p> -->
    </div>
    <div class="cont_txt">
      <div class="text" id="textlist">
        <p class="text_p fl">系统消息：<span class="span" id="gf">请遵守直播间规范！</span></p>
        <!-- <p class="text_p fl">直播消息：<span class="span">王赫关注了老师，不错过下一次直播</span></p>
        <p class="text_p fl"><span class="span1">叶晓晨</span> 老师你这一节课，讲的三角函数，正是我明天要考试的哈哈哈</p>
        <p class="text_p fl"><span class="span1">叶晓晨</span> <span class="span">进入直播间</span></p>
        <p class="text_p fl">系统消息：<span class="span">您现在正在收看“岳立欣”开启的"数学"学习之旅，分享直播会有意向不到的惊喜哦！</span></p>
        <p class="text_p fl">直播消息：<span class="span">王赫关注了老师，不错过下一次直播</span></p>
        <p class="text_p fl"><span class="span1">叶晓晨</span> 老师你这一节课，讲的三角函数，正是我明天要考试的哈哈哈</p>
        <p class="text_p fl"><span class="span1">叶晓晨</span> <span class="span">进入直播间</span></p></r>
        <p class="text_p fl">99+条新消息：<span class="span_img fr"><img src="../image/down.png" alt=""></span></p> -->




      </div>
    </div>

  <!-- <div class="footer">
    <input type="text" name="" value="" class="fl input">
    <p class="footer_r fr">发送</p>
  </div> -->
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js" ></script>

<script type="text/javascript">


       var oHeight = $(document).height(); //屏幕当前的高度

        $(window).resize(function(){

                if($(document).height() < oHeight){

                $(".cont_txt").css("display","none");


            }else{

                $(".cont_txt").css("display","block");


            }

            });``

</script>
  <script type="text/javascript">
      $(document).ready(function() {
          $('.right_img:eq(6)').css("display",'none');
      })

      var id
      var qiniuLive
      var c = new Array()
      var rong
      var ry_token = $api.getStorage('ry_token');
      var shop_head
      var title
      apiready = function(){
        id = api.pageParam.id
        shop_head = api.pageParam.head_url
        title = api.pageParam.title


        $("#shop_head").attr('src',shop_head)
        $("#gf").html(title)
        rong = api.require('rongCloud2');//引入融云

        c[id] = id+'kb'
        qiniuLive = api.require('qiniuLive');//引入七牛云直播
        // 使用js创建聊天室后归还给数据库方便客户端使用
      //  set_room(id)
      //  lq_room_smg()
      joinChatRoom(id)

      };

      function setOnReceiveMessageListener() {
        //alert('设置监听')
          rong.setOnReceiveMessageListener(function(ret, err) {

            var jsonlist= JSON.stringify(ret.result.message)
            var obj = JSON.parse(jsonlist);
            var nick= ret.result.message.content.extra.replace("\\","")
            var objs = JSON.parse(nick);

              html ='<p class="text_p fl"><span class="span1">'+objs.nickname+'</span>'+obj.content.text+'</p>'
              $("#textlist").append(html)


          })
      }
      function joinChatRoom(room_id) {
    // 默认会创建聊天室
          rong.init(function(ret, err) {

          });
          rong.connect({
              token: ry_token
          },function(ret, err) {
              setOnReceiveMessageListener();
          });


          setTimeout(function () {
            rong.joinChatRoom({
                chatRoomId: room_id,
                defMessageCount: 20
            }, function(ret, err) {

            })
            setOnReceiveMessageListener();
            get_userlist()
          },1000)


      }

function set_room(id){

  //会员头像
  var appKey = "pwe86ga5p99q6";
  var appSecret = "tTNc5tntn1oc";
  var nonce = Math.floor(Math.random() * 1000000);
  //随机数
  var timestamp = Date.now();
  //时间戳
  var signature = sha1("" + appSecret + nonce + timestamp);
  //数据签名(通过哈希加密计算)
  api.ajax({
          url : "http://api-cn.ronghub.com/chatroom/create.json",
          method : "post",
          headers : {
                  "RC-App-Key" : appKey,
                  "RC-Nonce" : "" + nonce,
                  "RC-Timestamp" : "" + timestamp,
                  "RC-Signature" : "" + signature,
                  "Content-Type" : "application/x-www-form-urlencoded"
          },
          data : {
                  values : {
                          c
                  }
          }
  }, function(ret, err) {
          if (ret) {

            if(ret.code==200){
              //set_ajax()
              rong.joinChatRoom({
                chatRoomId: id,
                defMessageCount: 20
              }, function(ret, err) {


              })

            }
                  //将token存储到本地
              //    alert("你的token是："+ret.token);
          } else {
            api.hideProgress();
            msgcode('开启聊天室失败,请稍后登陆')
            setTimeout(function () {
              api.closeWin({

              });
            },1000)
                  //alert("获取token失败")
          }
  });
}


    function set_ajax() {
      api.ajax({
          url: SITE_URL+'livebr/Ryroom/index',
          method: 'post',
          data: {
              values: {
                  id: id,
                  room_id:id
              }
          }
      },function(ret, err){
          if (ret) {
            if(ret.error==200){

            }else{
              msgcode('创建聊天室失败,稍后重进')
              zx_room()
              setTimeout(function () {
                api.closeWin({

                });

              },1500)
            }
            //  alert( JSON.stringify( ret ) );
          } else {
            zx_room()
            setTimeout(function () {

              api.closeWin({

              });

            },1500)
            msgcode('创建聊天室失败,稍后重进')
            zx_room()
            setTimeout(function () {

              api.closeWin({

              });

            },1500)
            //  alert( JSON.stringify( err ) );
          }
      });

    }

    function zx_room(id){

      //会员头像
      var appKey = "pwe86ga5p99q6";
      var appSecret = "tTNc5tntn1oc";
      var nonce = Math.floor(Math.random() * 1000000);
      //随机数
      var timestamp = Date.now();
      //时间戳
      var signature = sha1("" + appSecret + nonce + timestamp);
      //数据签名(通过哈希加密计算)
      api.ajax({
              url : "http://api-cn.ronghub.com/chatroom/destroy.json",
              method : "post",
              headers : {
                      "RC-App-Key" : appKey,
                      "RC-Nonce" : "" + nonce,
                      "RC-Timestamp" : "" + timestamp,
                      "RC-Signature" : "" + signature,
                      "Content-Type" : "application/x-www-form-urlencoded"
              },
              data : {
                      values : {
                              chatroomId:id
                      }
              }
      }, function(ret, err) {
              if (ret) {
              console.log('销毁成功')
                      //将token存储到本地
                  //    alert("你的token是："+ret.token);
              } else {

                      //alert("获取token失败")
              }
      });
    }


    function get_userlist(){

      //会员头像
      var appKey = "pwe86ga5p99q6";
      var appSecret = "tTNc5tntn1oc";
      var nonce = Math.floor(Math.random() * 1000000);
      //随机数
      var timestamp = Date.now();
      //时间戳
      var signature = sha1("" + appSecret + nonce + timestamp);
      //数据签名(通过哈希加密计算)
      api.ajax({
              url : "http://api-cn.ronghub.com/chatroom/user/query.json",
              method : "post",
              headers : {
                      "RC-App-Key" : appKey,
                      "RC-Nonce" : "" + nonce,
                      "RC-Timestamp" : "" + timestamp,
                      "RC-Signature" : "" + signature,
                      "Content-Type" : "application/x-www-form-urlencoded"
              },
              data : {
                      values : {
                              chatroomId:id,
                              count:500,
                              order:2
                      }
              }
      }, function(ret, err) {
              if (ret) {
                $("#usernum").html(ret.total+'人')
                get_u(ret.users)
                setTimeout(function () {
                  get_userlist()
                },20000)

                      //将token存储到本地
                  //    alert("你的token是："+ret.token);
              } else {
//alert( JSON.stringify( ret ) );
                      //alert("获取token失败")
              }
      });
    }

function get_u(ulist) {
  var uidlist = new Array()
  for (var i = 0; i < ulist.length; i++) {
    var dat = ulist[i]
    uidlist.push(dat.id)
  }
  get_head(uidlist)
}
function get_head(ulists) {
  var html =''
  var obj = $api.byId('uheads');
  $("#uheads").html('')
  api.ajax({
      url: SITE_URL+'livebr/ryroom/get_userlist',
      method: 'post',
      data: {
          values: {
              id: ulists.join(",")
          }
      }
  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          for (var i = 0; i < ret.data.length; i++) {
            var dat = ret.data[i]


            html +='<img src="'+dat.head_img+'" alt="" width="100%" height="100%"class="right_img fr">'

          }
          $api.html(obj, html);


        }
        //  alert( JSON.stringify( ret ) );
      } else {
//          alert( JSON.stringify( err ) );
      }
  });

}

      function of() {
        api.confirm({
            title: '是否确认关闭直播?',
            buttons: ['确定', '取消']
        }, function(ret, err) {
            if (ret.buttonIndex == 1) {
              msgcode('关闭成功')
              qiniuLive.stopStream(function(ret){
                //  alert(JSON.stringify(ret));
              });
              qiniuLive.destroyStream();

              rong.quitChatRoom({
                   chatRoomId: id
               }, function(ret, err) {

                       //api.toast({ msg: err.code });
               })
               zx_room(id)
              setTimeout(function () {
                api.closeWin({

                });

              },1000)
            }

        });
      }


      //聊天 start

      function connect() {
          // 创建一个 websocket 连接
          ws = new WebSocket("ws://47.93.186.254:9238");
          // websocket 创建成功事件
          ws.onopen = onopen;
          // websocket 接收到消息事件
          ws.onmessage = onmessage;
          ws.onclose = onclose;
          ws.onerror = onerror;
      }

      function onopen()
      {
          var data = "系统消息：建立连接成功";
          console.log(data);
      }

      function onmessage(e)
      {
          var data = JSON.parse(e.data);
          switch (data.type) {
              case 'handShake':
                  console.log(data.msg);
                  //发送用户登录
                  var user_info = {'type': 'login', 'msg': userinfo.nick_name, 'headerimg': userinfo.head_img, 'room': room};
                  sendMsg(user_info);
                  break;
              case 'login':
                  //userList(data.user_list);
                  systemMessage('系统消息: ' + data.msg + ' 已上线');
                  break;
              case 'logout':
                  //userList(data.user_list);
                  if (data.msg.length > 0) {
                      systemMessage('系统消息: ' + data.msg + ' 已下线');
                  }
                  break;
              case 'user':
                //  messageList(data);
                  break;
              case 'system':
                  systemMessage();
                  break;
          }
      }
      function onclose()
      {
          console.log("连接关闭，定时重连");
          connect();
      }

      // websocket 错误事件
      function onerror()
      {
          var data = "系统消息 : 出错了,请退出重试.";
          console.log(data);
      }

      function confirm(event) {
          var key_num = event.keyCode;
          if (13 == key_num) {
              //send();
              console.log('send error, key_num');
          } else {
              return false;
          }
      }

      function systemMessage(msg) {
          /*
          var html = `<div class="conversation-start">
              <span>` + msg + `</span>
          </div>`;
          var active_chat = document.querySelector('div.active-chat');
          var oldHtml = active_chat.innerHTML;
          active_chat.innerHTML = oldHtml + html;
          active_chat.scrollTop = active_chat.scrollHeight;
          */

          $("#textlist").append('<p class="text_p fl">' +  msg + '</p>')

      }

      function sendContent(msg) {
         // var msg = document.querySelector("input#input-value").value;
          //var room = Math.round(Math.random() * 2);
          var reg = new RegExp("\r\n", "g");
          console.log('room1:' + room);
          msg = msg.replace(reg, "");

          sendMsg({type: "user", msg: msg});
          //document.querySelector("input#input-value").value = "";
      }

      function sendMsg(msg) {
          var data = JSON.stringify(msg);
          ws.send(data);
      }

      function userList(user) {
          var html = '';
          for (var i = 0; i < user.length; i++) {
              html += `<li class="person" data-chat="person1">
                      <img src="` + user[i].headerimg + `" alt=""/>
                      <span class="name">` + user[i].username + `</span>
                      <span class="time">` + user[i].login_time + `</span>
                      <span class="preview" style="color: green;font-size: 7px;">在线</span>
                  </li>`;
          }
          document.querySelector('ul.people').innerHTML = html;
          document.querySelector('span#numbers').innerHTML = user.length;
      }

      function messageList(data) {
          if (data.from == uname) {
              var html = `<div class="message">
                      <img class="me-header" src="` + data.headerimg + `" alt=""/>
                      <div class="bubble me">` + data.msg + `</div>
                  </div>`;
          } else {
              var html = `<div class="message">
                      <img src="` + data.headerimg + `" alt=""/>
                      <div class="bubble you">` + data.msg + `</div>
                  </div>`;
          }
          var active_chat = document.querySelector('div.active-chat');
          var oldHtml = active_chat.innerHTML;
          active_chat.innerHTML = oldHtml + html;
          active_chat.scrollTop = active_chat.scrollHeight;

          $("#say_list").append('<p class="text_p fl"><span class="span1">' + userinfo.nick_name + '</span>' + data.msg + '</p>')

      }

      //聊天 end

  </script>
  </html>
